import React, {useState, memo, useCallback, useMemo} from 'react';
import {
  View,
  StyleSheet,
  Text,
  ScrollView,
  TouchableHighlight,
  RefreshControl,
} from 'react-native';
import Colors from '../../utils/Colors';
import {useSelector} from 'react-redux';
import LazyloadImg from '../base/LazyloadImg';
import PatIcon from '../base/PatIcon';
import {useNavigation} from '@react-navigation/native';

const Cate = ({height}) => {
  const navCategories = useSelector(state => state.categroy.navCategories);
  const [isSelect, setIsSelect] = useState(0);
  const navSon = useMemo(() => {
    const arr = navCategories.filter(item => item.id === isSelect);
    if (arr.length > 0) {
      return arr[0].son_nodes;
    }
    return [];
  }, [isSelect, navCategories]);
  const [refreshing, setRefreshing] = useState(false);
  const [isScroll, setScroll] = useState(true);

  const onRefresh = useCallback(() => {
    if (isScroll) {
      setRefreshing(true);
      setTimeout(() => {
        setRefreshing(false);
      }, 3000);
    }
  }, [isScroll]);
  const onScroll = useCallback(
    e => {
      if (e.nativeEvent.contentOffset.y <= 0 !== isScroll) {
        setScroll(e.nativeEvent.contentOffset.y <= 0);
      }
    },
    [isScroll],
  );
  const onChange = React.useCallback(
    data => () => {
      setIsSelect(data.id);
    },
    [],
  );
  return (
    <ScrollView
      showsVerticalScrollIndicator={false}
      refreshControl={
        <RefreshControl
          enabled={isScroll}
          refreshing={refreshing}
          onRefresh={onRefresh}
        />
      }
      scrollEnabled={false}>
      <View style={[styles.cate, {height: height}]}>
        <View style={styles.cateBox}>
          <ScrollView onScroll={onScroll} showsVerticalScrollIndicator={false}>
            {navCategories.map((item, index) => (
              <CateOneItem
                onChange={onChange}
                key={item.id}
                item={item}
                isSelect={isSelect}
              />
            ))}
          </ScrollView>
        </View>
        {isSelect ? (
          <View style={styles.cateSon}>
            <ScrollView
              onScroll={onScroll}
              showsVerticalScrollIndicator={false}>
              {navSon.map((item, index) => {
                return <NavSonItem key={item.id} item={item} />;
              })}
            </ScrollView>
          </View>
        ) : null}
      </View>
    </ScrollView>
  );
};

const CateOneItem = memo(({item, isSelect, onChange}) => {
  item.icon = item.icon.replace(/^http:/, 'https:');
  if (isSelect === 0) {
    return (
      <TouchableHighlight
        activeOpacity={1}
        underlayColor={Colors.white}
        onPress={onChange(item)}>
        <View style={styles.noSelectItem}>
          <LazyloadImg style={styles.noSelectImg} source={{uri: item.icon}} />
          <View style={styles.noSelectTitle}>
            <Text style={styles.noSelectText}>{item.name}</Text>
            <Text style={styles.noSelectText}>{item.remark}</Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  }
  return (
    <TouchableHighlight
      activeOpacity={1}
      underlayColor={isSelect === item.id ? Colors.white : Colors.patBg}
      onPress={onChange(item)}>
      <View style={isSelect === item.id ? styles.itemActive : styles.item}>
        <LazyloadImg style={styles.img} source={{uri: item.icon}} />
        <Text style={styles.name}>{item.name}</Text>
      </View>
    </TouchableHighlight>
  );
});

const NavSonItem = memo(({item, isSelect}) => {
  const navigation = useNavigation();
  const goCateGroy = React.useCallback(
    data => () => {
      navigation.push('category-root', {data});
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [],
  );
  item.icon = item.icon.replace(/^http:/, 'https:');
  if (item.son_nodes && item.son_nodes.length > 0) {
    const list = item.son_nodes;
    return (
      <>
        <TouchableHighlight
          activeOpacity={1}
          underlayColor={Colors.white}
          onPress={goCateGroy(item)}>
          <View style={styles.avSonItemCateParent}>
            <View style={styles.navSonItem}>
              <LazyloadImg style={styles.navSonImg} source={{uri: item.icon}} />
              <Text style={styles.name}>{item.name}</Text>
            </View>
            <View style={styles.icon}>
              <PatIcon
                name="arrow-right"
                size={12}
                color={Colors.patFontGray2}
              />
            </View>
          </View>
        </TouchableHighlight>
        {list.map((data, index) => {
          return <NavSonItem key={index} item={data} />;
        })}
      </>
    );
  } else {
    return (
      <TouchableHighlight
        activeOpacity={1}
        underlayColor={isSelect === item.id ? Colors.white : Colors.patBg}
        onPress={goCateGroy(item)}>
        <View style={styles.navSonItem}>
          <LazyloadImg style={styles.navSonImg} source={{uri: item.icon}} />
          <Text style={styles.name}>{item.name}</Text>
        </View>
      </TouchableHighlight>
    );
  }
});
const styles = StyleSheet.create({
  h: {
    flex: 1,
    width: '100%',
    backgroundColor: '#f30',
  },
  cate: {
    flex: 1,
    width: '100%',
    backgroundColor: Colors.white,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
  },
  cateSon: {
    width: '70%',
  },
  cateBox: {
    flex: 1,
    position: 'relative',
    width: '100%',
    height: '100%',
    backgroundColor: Colors.white,
  },
  cateBox2: {
    width: '70%',
    height: '100%',
    position: 'relative',
    backgroundColor: 'red',
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    flexDirection: 'column',
  },
  noSelectItem: {
    display: 'flex',
    height: 100,
    width: '100%',
    marginTop: 5,
    backgroundColor: Colors.patBg,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    flexDirection: 'row',
  },
  noSelectImg: {
    width: 80,
    height: 80,
    marginTop: 10,
    marginRight: 40,
  },
  noSelectTitle: {
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
  },
  noSelectText: {
    height: 50,
    lineHeight: 50,
    color: Colors.patFontGray2,
    fontSize: 18,
  },
  item: {
    height: 100,
    width: '100%',
    marginTop: 5,
    backgroundColor: Colors.patBg,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
  },
  itemActive: {
    height: 100,
    width: '100%',
    marginTop: 5,
    backgroundColor: Colors.white,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
  },
  name: {
    marginTop: 10,
    color: Colors.patFontGray2,
    fontSize: 12,
    textAlign: 'center',
  },
  img: {
    width: 60,
    height: 60,
  },
  navSonItem: {
    display: 'flex',
    height: 50,
    backgroundColor: Colors.white,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    flexDirection: 'row',
    marginTop: 5,
  },
  avSonItemCateParent: {
    display: 'flex',
    height: 50,
    backgroundColor: Colors.white,
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    marginTop: 5,
  },
  navSonImg: {
    width: 30,
    height: 30,
    marginLeft: 10,
    marginRight: 30,
  },
  icon: {
    marginRight: 10,
    marginTop: -3,
  },
});
export default Cate;
